<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "js/images.js"></script>
<script type="text/javascript" src = "js/library.js"></script>
<script type="text/javascript" src = "js/util.js"></script>
<script type="text/javascript" src = "js/items.js"></script>
<script type="text/javascript" src = "js/item.js"></script>
<script type="text/javascript" src = "js/component.js"></script>
<script type="text/javascript" src = "js/main.js"></script>
<link rel = 'stylesheet' type = 'text/css' href = 'css/style.css'/>
<script type="text/javascript">
//event function
function canvasClicked(e)
{
    var gameCanvas = document.getElementById("gameCanvas");
    var x;
    var y;
    if (e.pageX || e.pageY) { 
      x = e.pageX;
      y = e.pageY;
    }
    else { 
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    x -= gameCanvas.offsetLeft;
    y -= gameCanvas.offsetTop;
  
    
    //ma_hong.clickEvent(x, y,mahong);
    
    
}
//create and new Game Obj
var game = null; 

function initGame()
{
	game = new Game("gameCanvas");
	update();
	
}
function update(){
	
	requestAnimFrame(update);
	game.update();
	TWEEN.update();
}
// 1 them ham requestAim...
// Them thu vien tween


//remove all item effect
function removeAllEffect()
{
	for(var i=0;i<10;i++)
	{
		game.itemStars[i].active=false;
	}	
	game.itemDust5.active=false;
	game.itemDust4.active=false;
	game.itemDust3.active=false;
	game.itemDust2.active=false;
	game.itemDust1.active=false;
	game.itemLip.active=false;
	game.itemEyelashBrush.active=false;
	game.itemEyebrowBrush2.active=false;
	game.itemCheekBrush.active=false;
	game.itemFireworks.active=false;
	game.componentBrush.active=false;
}

//-----Start : change skin color------------

function allStar()
{
	TWEEN.removeAll();
	removeAllEffect();
	for(var i=0;i<10;i++)
	{
		//alert(game.itemStars.length);
		game.itemStars[i].active=true;
		game.itemStars[i].x = game.xs[i];
		game.itemStars[i].y = game.ys[i];
		game.itemStars[i].angle=0;
	
		star(game.itemStars[i]);

	}	
}

function star(item)
{
	//game.componentStar.activeItem(item);
   
	tween = new TWEEN.Tween(item)
	.to({x:item.x+15,y:item.y+30,width:30+Math.round(Math.random()*5),height:30+Math.round(Math.random()*5),angle:2+Math.round(Math.random())}, 500)
	//alert("a1 : "+Math.random());
	 
	
	
	tweenBack = new TWEEN.Tween(item)
	.to({x:item.x,y:item.y+50,width:40+Math.round(Math.random()*5),height:40+Math.round(Math.random()*5),angle:0.0}, 200)
	

	tweenEnd = new TWEEN.Tween(item)
	.to({x:item.x+15,y:item.y+100,width:10+Math.round(Math.random()*5),height:10+Math.round(Math.random()*5),angle:-2.5}, 600)
	.onComplete(function(){
	game.componentStar.deActiveItem(item);
	
	});
	
	//alert("a2 : "+Math.random());
	
	 
	tweenBack.chain(tween); 
	 
	tweenEnd.chain(tweenBack);
	 
	tween.chain(tweenEnd);
	
	
	tween.start();
	
}

//change skin1 type 
function skin1()
{ 
	game.componentSkin.activeItem(game.itemSkin1);
	allStar();
	
}

//change skin2 type 
function skin2()
{ 
	game.componentSkin.activeItem(game.itemSkin2);
	allStar();
}

//change skin3 type 
function skin3()
{ 
	game.componentSkin.activeItem(game.itemSkin3);
	allStar();
	
}

//change skin4 type 
function skin4()
{ 
	game.componentSkin.activeItem(game.itemSkin4);
	allStar();
}

//-----End : change skin color


//-----Start : change cheek color
function dustCheek()
{
	TWEEN.removeAll();
	removeAllEffect();
	game.componentBrush.activeItem(game.itemCheekBrush);
	
	
	tweenDustCheck1 = new TWEEN.Tween(game.itemDust3)
	.to({y:260}, 0);
	tweenDustCheck2 = new TWEEN.Tween(game.itemDust4)
	.to({y:260}, 0);
	tweenDustCheck3 = new TWEEN.Tween(game.itemDust5)
	.to({y:260}, 0);
	
	tweenDustCheck1.chain(tweenDustCheck2);
	tweenDustCheck2.chain(tweenDustCheck3);
	tweenDustCheck1.start();
	
	tweenDust = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust1 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	
	tweenDust2 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust3 = new TWEEN.Tween(game.itemDust3)
	.to({x:185}, 0);
	tweenDust4 = new TWEEN.Tween(game.itemDust4)
	.to({x:185}, 0);
	tweenDust5 = new TWEEN.Tween(game.itemDust5)
	.to({x:185}, 0);
	
	
	tweenDust6 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust7 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	tweenDust8 = new TWEEN.Tween(game.itemDust5)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust9 = new TWEEN.Tween(game.itemDust3)
	.to({x:125}, 0);
	tweenDust10 = new TWEEN.Tween(game.itemDust4)
	.to({x:125}, 0);
	tweenDust11 = new TWEEN.Tween(game.itemDust5)
	.to({x:125}, 0);
	
	tweenDust.chain(tweenDust1);
	tweenDust1.chain(tweenDust2);
	tweenDust2.chain(tweenDust3);
	tweenDust3.chain(tweenDust4);
	tweenDust4.chain(tweenDust5);
	tweenDust5.chain(tweenDust6);
	tweenDust6.chain(tweenDust7);
	tweenDust7.chain(tweenDust8);
	tweenDust8.chain(tweenDust9);
	tweenDust9.chain(tweenDust10);
	tweenDust10.chain(tweenDust11);
	
	tweenDust.start();
	
	var item = game.itemCheekBrush;
	
	tween1 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);

	tween2 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150);
	
	
	tween3 = new TWEEN.Tween(item)
	.to({x:180}, 0);
	
	
	tween4 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);
	
	tween5 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150)
	.onComplete(function(){
		
		game.componentBrush.deActiveItem(item);
		
	});
	tween6 = new TWEEN.Tween(item)
	.to({x:119,angle:0}, 0);
	
	tween1.chain(tween2);	
	tween2.chain(tween3);
	tween3.chain(tween4);
	tween4.chain(tween5);
	tween5.chain(tween6);
	tween1.start();	
}

//change cheek color to whiteCheek
function cheek1()
{ 
	game.componentCheek.activeItem(game.itemCheek1);
	dustCheek();
}
//change cheek color to pinkCheek
function cheek2()
{ 
	game.componentCheek.activeItem(game.itemCheek2);
	dustCheek();
}
//change cheek color to orangeCheek
function cheek3()
{ 
	game.componentCheek.activeItem(game.itemCheek3);
	dustCheek();
}
//change cheek color to brownCheek  
function cheek4()
{ 
	game.componentCheek.activeItem(game.itemCheek4);
	dustCheek();
}

//-----End : change cheek color 



//-----Start : change eyeliner color---------

//change eyeliner 1 color 
function dustEyeLiner()
{
	TWEEN.removeAll();
	removeAllEffect();
	game.componentBrush.activeItem(game.itemEyebrowBrush);
	
	
	tweenDustCheck1 = new TWEEN.Tween(game.itemDust3)
	.to({y:230}, 0);
	tweenDustCheck2 = new TWEEN.Tween(game.itemDust4)
	.to({y:230}, 0);
	tweenDustCheck3 = new TWEEN.Tween(game.itemDust5)
	.to({y:230}, 0);
	
	tweenDustCheck1.chain(tweenDustCheck2);
	tweenDustCheck2.chain(tweenDustCheck3);
	tweenDustCheck1.start();
	
	tweenDust = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust1 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	
	tweenDust2 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust3 = new TWEEN.Tween(game.itemDust3)
	.to({x:185}, 0);
	tweenDust4 = new TWEEN.Tween(game.itemDust4)
	.to({x:185}, 0);
	tweenDust5 = new TWEEN.Tween(game.itemDust5)
	.to({x:185}, 0);
	
	
	tweenDust6 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust7 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	tweenDust8 = new TWEEN.Tween(game.itemDust5)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust9 = new TWEEN.Tween(game.itemDust3)
	.to({x:125}, 0);
	tweenDust10 = new TWEEN.Tween(game.itemDust4)
	.to({x:125}, 0);
	tweenDust11 = new TWEEN.Tween(game.itemDust5)
	.to({x:125}, 0);
	
	tweenDust.chain(tweenDust1);
	tweenDust1.chain(tweenDust2);
	tweenDust2.chain(tweenDust3);
	tweenDust3.chain(tweenDust4);
	tweenDust4.chain(tweenDust5);
	tweenDust5.chain(tweenDust6);
	tweenDust6.chain(tweenDust7);
	tweenDust7.chain(tweenDust8);
	tweenDust8.chain(tweenDust9);
	tweenDust9.chain(tweenDust10);
	tweenDust10.chain(tweenDust11);
	
	tweenDust.start();
	
	var item = game.itemEyebrowBrush;
	
	tween1 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);

	tween2 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150);
	
	
	tween3 = new TWEEN.Tween(item)
	.to({x:180}, 0);
	
	
	tween4 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);
	
	tween5 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150)
	.onComplete(function(){
		
		game.componentBrush.deActiveItem(item);
		
	});
	tween6 = new TWEEN.Tween(item)
	.to({x:119,angle:0}, 0);
	
	tween1.chain(tween2);	
	tween2.chain(tween3);
	tween3.chain(tween4);
	tween4.chain(tween5);
	tween5.chain(tween6);
	tween1.start();	
}

function eyeliner1()
{ 
	game.componentEyeliner.activeItem(game.itemEyeliner1);
	dustEyeLiner();
}

//change eyeliner 2 color 
function eyeliner2()
{ 
	game.componentEyeliner.activeItem(game.itemEyeliner2);
	dustEyeLiner();
}

//change eyeliner 3 color 
function eyeliner3()
{ 
	game.componentEyeliner.activeItem(game.itemEyeliner3);
	dustEyeLiner();
}

//change eyeliner 4 color 
function eyeliner4()
{ 
	game.componentEyeliner.activeItem(game.itemEyeliner4);
	dustEyeLiner();
}

//change eyeliner 5 color 
function eyeliner5()
{ 
	game.componentEyeliner.activeItem(game.itemEyeliner5);
	dustEyeLiner();
}

//change eyeliner 6 color 
function eyeliner6()
{ 
	game.componentEyeliner.activeItem(game.itemEyeliner6);
	dustEyeLiner();
}

//change eyeliner 7 color 
function eyeliner7()
{ 
	game.componentEyeliner.activeItem(game.itemEyeliner7);
	dustEyeLiner();
}

//-----End : change eyeliner color


//-----Start : change eyebrow1 color-------

function dustEyeBrow()
{
	TWEEN.removeAll();
	removeAllEffect();
	game.componentBrush.activeItem(game.itemEyebrowBrush2);
	
	
	tweenDustCheck1 = new TWEEN.Tween(game.itemDust3)
	.to({y:230}, 0);
	tweenDustCheck2 = new TWEEN.Tween(game.itemDust4)
	.to({y:230}, 0);
	tweenDustCheck3 = new TWEEN.Tween(game.itemDust5)
	.to({y:230}, 0);
	
	tweenDustCheck1.chain(tweenDustCheck2);
	tweenDustCheck2.chain(tweenDustCheck3);
	tweenDustCheck1.start();
	
	tweenDust = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust1 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	
	tweenDust2 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust3 = new TWEEN.Tween(game.itemDust3)
	.to({x:185}, 0);
	tweenDust4 = new TWEEN.Tween(game.itemDust4)
	.to({x:185}, 0);
	tweenDust5 = new TWEEN.Tween(game.itemDust5)
	.to({x:185}, 0);
	
	
	tweenDust6 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust7 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	tweenDust8 = new TWEEN.Tween(game.itemDust5)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust9 = new TWEEN.Tween(game.itemDust3)
	.to({x:125}, 0);
	tweenDust10 = new TWEEN.Tween(game.itemDust4)
	.to({x:125}, 0);
	tweenDust11 = new TWEEN.Tween(game.itemDust5)
	.to({x:125}, 0);
	
	tweenDust.chain(tweenDust1);
	tweenDust1.chain(tweenDust2);
	tweenDust2.chain(tweenDust3);
	tweenDust3.chain(tweenDust4);
	tweenDust4.chain(tweenDust5);
	tweenDust5.chain(tweenDust6);
	tweenDust6.chain(tweenDust7);
	tweenDust7.chain(tweenDust8);
	tweenDust8.chain(tweenDust9);
	tweenDust9.chain(tweenDust10);
	tweenDust10.chain(tweenDust11);
	
	tweenDust.start();
	
	var item = game.itemEyebrowBrush2;
	
	tween1 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);

	tween2 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150);
	
	
	tween3 = new TWEEN.Tween(item)
	.to({x:180}, 0);
	
	
	tween4 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);
	
	tween5 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150)
	.onComplete(function(){
		
		game.componentBrush.deActiveItem(item);
		
	});
	tween6 = new TWEEN.Tween(item)
	.to({x:119,angle:0}, 0);
	
	tween1.chain(tween2);	
	tween2.chain(tween3);
	tween3.chain(tween4);
	tween4.chain(tween5);
	tween5.chain(tween6);
	tween1.start();	
}

//change eyebrow 1 color
function eyebrow1()
{ 
	game.componentEyeBrow.activeItem(game.itemEyeBrow1);
	dustEyeBrow();
}

//change eyebrow 2 color
function eyebrow2()
{ 
	game.componentEyeBrow.activeItem(game.itemEyeBrow2);
	dustEyeBrow();
}

//change eyebrow 3 color
function eyebrow3()
{ 
	game.componentEyeBrow.activeItem(game.itemEyeBrow3);
	dustEyeBrow();
}

//change eyebrow 4 color
function eyebrow4()
{ 
	game.componentEyeBrow.activeItem(game.itemEyeBrow4);
	dustEyeBrow();
}

//change eyebrow 5 color
function eyebrow5()
{ 
	game.componentEyeBrow.activeItem(game.itemEyeBrow5);
	dustEyeBrow();
}

 
//-----End : change eyebrow color


//-----Start : change eyelash1 type

function dustEyelash()
{
	TWEEN.removeAll();
	removeAllEffect();
	game.componentBrush.activeItem(game.itemEyelashBrush);
	
	
	tweenDustCheck1 = new TWEEN.Tween(game.itemDust3)
	.to({y:240}, 0);
	tweenDustCheck2 = new TWEEN.Tween(game.itemDust4)
	.to({y:240}, 0);
	tweenDustCheck3 = new TWEEN.Tween(game.itemDust5)
	.to({y:240}, 0);
	
	tweenDustCheck1.chain(tweenDustCheck2);
	tweenDustCheck2.chain(tweenDustCheck3);
	tweenDustCheck1.start();
	
	tweenDust = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust1 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	
	tweenDust2 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust3 = new TWEEN.Tween(game.itemDust3)
	.to({x:185}, 0);
	tweenDust4 = new TWEEN.Tween(game.itemDust4)
	.to({x:185}, 0);
	tweenDust5 = new TWEEN.Tween(game.itemDust5)
	.to({x:185}, 0);
	
	
	tweenDust6 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust7 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	tweenDust8 = new TWEEN.Tween(game.itemDust5)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust9 = new TWEEN.Tween(game.itemDust3)
	.to({x:125}, 0);
	tweenDust10 = new TWEEN.Tween(game.itemDust4)
	.to({x:125}, 0);
	tweenDust11 = new TWEEN.Tween(game.itemDust5)
	.to({x:125}, 0);
	
	tweenDust.chain(tweenDust1);
	tweenDust1.chain(tweenDust2);
	tweenDust2.chain(tweenDust3);
	tweenDust3.chain(tweenDust4);
	tweenDust4.chain(tweenDust5);
	tweenDust5.chain(tweenDust6);
	tweenDust6.chain(tweenDust7);
	tweenDust7.chain(tweenDust8);
	tweenDust8.chain(tweenDust9);
	tweenDust9.chain(tweenDust10);
	tweenDust10.chain(tweenDust11);
	
	tweenDust.start();
	
	var item = game.itemEyelashBrush;
	
	tween1 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);

	tween2 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150);
	
	
	tween3 = new TWEEN.Tween(item)
	.to({x:180}, 0);
	
	
	tween4 = new TWEEN.Tween(item)
	.to({angle:0.7}, 150);
	
	tween5 = new TWEEN.Tween(item)
	.to({angle:-0.1}, 150)
	.onComplete(function(){
		
		game.componentBrush.deActiveItem(item);
		
	});
	tween6 = new TWEEN.Tween(item)
	.to({x:119,angle:0}, 0);
	
	tween1.chain(tween2);	
	tween2.chain(tween3);
	tween3.chain(tween4);
	tween4.chain(tween5);
	tween5.chain(tween6);
	tween1.start();	
}


//change eyelash 1 type
function eyelash1()
{ 
	game.componentEyeLash.activeItem(game.itemEyeLash1);
	dustEyelash();
}

//change eyelash 2 type
function eyelash2()
{ 
	game.componentEyeLash.activeItem(game.itemEyeLash2);
	dustEyelash();
}

//change eyelash 3 type
function eyelash3()
{ 
	game.componentEyeLash.activeItem(game.itemEyeLash3);
	dustEyelash();
}

//change eyelash 4 type
function eyelash4()
{ 
	game.componentEyeLash.activeItem(game.itemEyeLash4);
	dustEyelash();
}

//change eyelash 5 type
function eyelash5()
{ 
	game.componentEyeLash.activeItem(game.itemEyeLash5);
	dustEyelash();
}

//-----End : change eyelash type


//-----Start : change eye color ----------

function eyecolor()
{	
	TWEEN.removeAll();
	removeAllEffect();
	tweenDustCheck1 = new TWEEN.Tween(game.itemDust3)
	.to({y:240}, 0);
	tweenDustCheck2 = new TWEEN.Tween(game.itemDust4)
	.to({y:240}, 0);
	tweenDustCheck3 = new TWEEN.Tween(game.itemDust5)
	.to({y:240}, 0);
	
	tweenDustCheck1.chain(tweenDustCheck2);
	tweenDustCheck2.chain(tweenDustCheck3);
	tweenDustCheck1.start();

	tweenDust = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust1 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	
	tweenDust2 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust3 = new TWEEN.Tween(game.itemDust3)
	.to({x:185}, 0);
	tweenDust4 = new TWEEN.Tween(game.itemDust4)
	.to({x:185}, 0);
	tweenDust5 = new TWEEN.Tween(game.itemDust5)
	.to({x:185}, 0);
	
	
	tweenDust6 = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust7 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	tweenDust8 = new TWEEN.Tween(game.itemDust5)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	tweenDust9 = new TWEEN.Tween(game.itemDust3)
	.to({x:125}, 0);
	tweenDust10 = new TWEEN.Tween(game.itemDust4)
	.to({x:125}, 0);
	tweenDust11 = new TWEEN.Tween(game.itemDust5)
	.to({x:125}, 0);
	
	tweenDust.chain(tweenDust1);
	tweenDust1.chain(tweenDust2);
	tweenDust2.chain(tweenDust3);
	tweenDust3.chain(tweenDust4);
	tweenDust4.chain(tweenDust5);
	tweenDust5.chain(tweenDust6);
	tweenDust6.chain(tweenDust7);
	tweenDust7.chain(tweenDust8);
	tweenDust8.chain(tweenDust9);
	tweenDust9.chain(tweenDust10);
	tweenDust10.chain(tweenDust11);
	
	tweenDust.start();
}


//change eyecolor 1 type 
function eyecolor1()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor1);
	eyecolor();
}
//change eyecolor 2 type 
function eyecolor2()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor2);
	eyecolor();
}
//change eyecolor 3 type 
function eyecolor3()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor3);
	eyecolor();
}
//change eyecolor 4 type 
function eyecolor4()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor4);
	eyecolor();
}
//change eyecolor 5 type 
function eyecolor5()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor5);
	eyecolor();
}
//change eyecolor 6 type 
function eyecolor6()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor6);
	eyecolor();
}
//change eyecolor 7 type 
function eyecolor7()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor7);
	eyecolor();
}
//change eyecolor 8 type 
function eyecolor8()
{ 
	game.componentEyecolor.activeItem(game.itemEyecolor8);
	eyecolor();
}
 
//-----End : change eye color ----------


//-----Start : change lip color-------

function lip()
{
	TWEEN.removeAll();
	removeAllEffect();
	game.componentBrush.activeItem(game.itemLip);
	
	
	tweenDustCheck1 = new TWEEN.Tween(game.itemDust3)
	.to({x:155,y:285}, 0);
	tweenDustCheck2 = new TWEEN.Tween(game.itemDust4)
	.to({x:155,y:285}, 0);
	tweenDustCheck3 = new TWEEN.Tween(game.itemDust5)
	.to({x:155,y:285}, 0);
	
	tweenDustCheck1.chain(tweenDustCheck2);
	tweenDustCheck2.chain(tweenDustCheck3);
	tweenDustCheck1.start();
	
	tweenDust = new TWEEN.Tween(game.itemDust3)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust3);
	});
	
	tweenDust1 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust4);
	});
	
	tweenDust2 = new TWEEN.Tween(game.itemDust4)
	.to({angle:-0}, 150)
	.onComplete(function(){
		game.componentDust.activeItem(game.itemDust5);
		game.componentDust.deActiveItem(game.itemDust5);
	});
	
	
	
	tweenDust9 = new TWEEN.Tween(game.itemDust3)
	.to({x:125}, 0);
	tweenDust10 = new TWEEN.Tween(game.itemDust4)
	.to({x:125}, 0);
	tweenDust11 = new TWEEN.Tween(game.itemDust5)
	.to({x:125}, 0);
	
	tweenDust.chain(tweenDust1);
	tweenDust1.chain(tweenDust2);
	
	tweenDust2.chain(tweenDust9);
	tweenDust9.chain(tweenDust10);
	tweenDust10.chain(tweenDust11);
	
	tweenDust.start();
	
	var item = game.itemLip;
	
	tween1 = new TWEEN.Tween(item)
	.to({x:165}, 150);

	tween2 = new TWEEN.Tween(item)
	.to({x:145}, 150);
	
	tween5 = new TWEEN.Tween(item)
	.to({x:165}, 150)
	.onComplete(function(){
		
		game.componentBrush.deActiveItem(item);
		
	});
	tween6 = new TWEEN.Tween(item)
	.to({x:145,angle:0}, 0);
	
	tween1.chain(tween2);	
	
	tween2.chain(tween5);
	tween5.chain(tween6);
	tween1.start();	
}

//change lip 1 color
function lip1()
{ 
	game.componentLip.activeItem(game.itemLip1);
	lip();
}
//change lip 2 color
function lip2()
{ 
	game.componentLip.activeItem(game.itemLip2);
	lip();
}
//change lip 1 color
function lip3()
{ 
	game.componentLip.activeItem(game.itemLip3);
	lip();
}
//change lip 4 color
function lip4()
{ 
	game.componentLip.activeItem(game.itemLip4);
	lip();
}
//change lip 5 color
function lip5()
{ 
	game.componentLip.activeItem(game.itemLip5);
	lip();
}
//change lip 6 color
function lip6()
{ 
	game.componentLip.activeItem(game.itemLip6);
	lip();
}


//-----End : change lip color-------


//-----Start : change clothes type

function fireworks()
{
	TWEEN.removeAll();
	removeAllEffect();
	game.componentBrush.activeItem(game.itemFireworks);
    
	tween = new TWEEN.Tween(game.itemFireworks)
	.to({width:214,height:182,y:440,angle:0}, 0)
	.onComplete(function(){
		game.componentBrush.activeItem(game.itemFireworks);
	});
	
	tween1 = new TWEEN.Tween(game.itemFireworks)
	.to({width:360,height:320,angle:12}, 500)
	.onComplete(function(){
		game.componentBrush.deActiveItem(game.itemFireworks);
	});
	
	
	tween2 = new TWEEN.Tween(game.itemFireworks)
	.to({width:214,height:182,y:440,angle:0}, 0)
	
	tween.chain(tween1);
	tween1.chain(tween2);
	
	tween.start();
}

//change clothes1 type 
function clothes1()
{ 
	game.componentClothes.activeItem(game.itemClothes1);
	fireworks();
}
//change clothes2 type 
function clothes2()
{ 
	game.componentClothes.activeItem(game.itemClothes2);
	fireworks();
}
//change clothes3 type 
function clothes3()
{ 
	game.componentClothes.activeItem(game.itemClothes3);
	fireworks();
}
//change clothes4 type 
function clothes4()
{ 
	game.componentClothes.activeItem(game.itemClothes4);
	fireworks();
}
//change clothes5 type 
function clothes5()
{ 
	game.componentClothes.activeItem(game.itemClothes5);
	fireworks();
}


//-----End : change clothes type 


//-----Start : change hair type

function fireworksHair()
{
	TWEEN.removeAll();
	removeAllEffect();
	tween = new TWEEN.Tween(game.itemFireworks)
	.to({width:214,height:182,y:220,angle:0}, 0)
	.onComplete(function(){
		game.componentBrush.activeItem(game.itemFireworks);
	});
	
	tween1 = new TWEEN.Tween(game.itemFireworks)
	.to({width:360,height:320,angle:12}, 500)
	.onComplete(function(){
		game.componentBrush.deActiveItem(game.itemFireworks);
	});
	
	
	tween2 = new TWEEN.Tween(game.itemFireworks)
	.to({width:214,height:182,y:220,angle:0}, 0);
	
	tween.chain(tween1);
	tween1.chain(tween2);
	
	tween.start();
}

//change hair1 type 
function hair1()
{ 
	game.componentHair.activeItem(game.itemHair1);
	fireworksHair();
}
//change hair2 type 
function hair2()
{ 
	game.componentHair.activeItem(game.itemHair2);
	fireworksHair();
}
//change hair3 type 
function hair3()
{ 
	game.componentHair.activeItem(game.itemHair3);
	fireworksHair();
}
//change hair4 type 
function hair4()
{ 
	game.componentHair.activeItem(game.itemHair4);
	fireworksHair();
}
//change hair5 type 
function hair5()
{ 
	game.componentHair.activeItem(game.itemHair5);
	fireworksHair();
}


//-----End : change hair type


//-----Start : change necklace type

function fireworksNecklace()
{
	TWEEN.removeAll();
	removeAllEffect();
	tween = new TWEEN.Tween(game.itemFireworks)
	.to({width:154,height:154,y:340,angle:0}, 0)
	.onComplete(function(){
		game.componentBrush.activeItem(game.itemFireworks);
	});
	
	
	tween1 = new TWEEN.Tween(game.itemFireworks)
	.to({width:230,height:230,angle:8}, 500)
	.onComplete(function(){
		game.componentBrush.deActiveItem(game.itemFireworks);
	});
	
	
	tween2 = new TWEEN.Tween(game.itemFireworks)
	.to({width:154,height:154,y:340,angle:0}, 0);
	
	tween.chain(tween1);
	tween1.chain(tween2);
	
	tween.start();
}

//change necklace1 type 
function necklace1()
{ 
	game.componentNecklace.activeItem(game.itemNecklace1);
	fireworksNecklace();
}

//change necklace2 type 
function necklace2()
{ 
	game.componentNecklace.activeItem(game.itemNecklace2);
	fireworksNecklace();
}

//change necklace3 type 
function necklace3()
{ 
	game.componentNecklace.activeItem(game.itemNecklace3);
	fireworksNecklace();
}

//change necklace4 type 
function necklace4()
{ 
	game.componentNecklace.activeItem(game.itemNecklace4);
	fireworksNecklace();
}
//change necklace5 type 
function necklace5()
{ 
	game.componentNecklace.activeItem(game.itemNecklace5);
	fireworksNecklace();
}

 



//-----End : change necklace type

 

//-----Start : change earring type

function dustRarring()
{
	
		TWEEN.removeAll();
		removeAllEffect();
		tweenDustCheck1 = new TWEEN.Tween(game.itemDust3)
		.to({y:270,x:100}, 0);
		tweenDustCheck2 = new TWEEN.Tween(game.itemDust4)
		.to({y:270,x:100}, 0);
		tweenDustCheck3 = new TWEEN.Tween(game.itemDust5)
		.to({y:270,x:100}, 0);
		
		tweenDustCheck1.chain(tweenDustCheck2);
		tweenDustCheck2.chain(tweenDustCheck3);
		tweenDustCheck1.start();

		tweenDust = new TWEEN.Tween(game.itemDust3)
		.to({angle:-0}, 150)
		.onComplete(function(){
			game.componentDust.activeItem(game.itemDust3);
		});
		
		tweenDust1 = new TWEEN.Tween(game.itemDust3)
		.to({angle:-0}, 150)
		.onComplete(function(){
			game.componentDust.activeItem(game.itemDust4);
		});
		
		tweenDust2 = new TWEEN.Tween(game.itemDust4)
		.to({angle:-0}, 150)
		.onComplete(function(){
			game.componentDust.activeItem(game.itemDust5);
			game.componentDust.deActiveItem(game.itemDust5);
		});
		
		tweenDust3 = new TWEEN.Tween(game.itemDust3)
		.to({x:210}, 0);
		tweenDust4 = new TWEEN.Tween(game.itemDust4)
		.to({x:210}, 0);
		tweenDust5 = new TWEEN.Tween(game.itemDust5)
		.to({x:210}, 0);
		
		
		tweenDust6 = new TWEEN.Tween(game.itemDust3)
		.to({angle:-0}, 150)
		.onComplete(function(){
			game.componentDust.activeItem(game.itemDust3);
		});
		
		tweenDust7 = new TWEEN.Tween(game.itemDust4)
		.to({angle:-0}, 150)
		.onComplete(function(){
			game.componentDust.activeItem(game.itemDust4);
		});
		tweenDust8 = new TWEEN.Tween(game.itemDust5)
		.to({angle:-0}, 150)
		.onComplete(function(){
			game.componentDust.activeItem(game.itemDust5);
			game.componentDust.deActiveItem(game.itemDust5);
		});
		
		tweenDust9 = new TWEEN.Tween(game.itemDust3)
		.to({x:125}, 0);
		tweenDust10 = new TWEEN.Tween(game.itemDust4)
		.to({x:125}, 0);
		tweenDust11 = new TWEEN.Tween(game.itemDust5)
		.to({x:125}, 0);
		
		tweenDust.chain(tweenDust1);
		tweenDust1.chain(tweenDust2);
		tweenDust2.chain(tweenDust3);
		tweenDust3.chain(tweenDust4);
		tweenDust4.chain(tweenDust5);
		tweenDust5.chain(tweenDust6);
		tweenDust6.chain(tweenDust7);
		tweenDust7.chain(tweenDust8);
		tweenDust8.chain(tweenDust9);
		tweenDust9.chain(tweenDust10);
		tweenDust10.chain(tweenDust11);
		
		tweenDust.start();
	
}

//change earring1 type 
function earring1()
{ 
	game.componentEarring.activeItem(game.itemEarring1);
	dustRarring();
}
//change earring1 type 
function earring2()
{ 
	game.componentEarring.activeItem(game.itemEarring2);
	dustRarring();
}
//change earring3 type 
function earring3()
{ 
	game.componentEarring.activeItem(game.itemEarring3);
	dustRarring();
}
//change earring4 type 
function earring4()
{ 
	game.componentEarring.activeItem(game.itemEarring4);
	dustRarring();
}
//change earring5 type 
function earring5()
{ 
	game.componentEarring.activeItem(game.itemEarring5);
	dustRarring();
}

//-----End : change earring type


//-----Start : change hat type

function fireworksHat()
{
	TWEEN.removeAll();
	removeAllEffect();
    
	tween = new TWEEN.Tween(game.itemFireworks)
	.to({width:214,height:182,y:140,angle:0}, 0)
	.onComplete(function(){
		game.componentBrush.activeItem(game.itemFireworks);
	});
	
	tween1 = new TWEEN.Tween(game.itemFireworks)
	.to({width:360,height:320,angle:12}, 500)
	.onComplete(function(){
		game.componentBrush.deActiveItem(game.itemFireworks);
	});
	

	tween2 = new TWEEN.Tween(game.itemFireworks)
	.to({width:214,height:182,y:140,angle:0}, 0);
	
	tween.chain(tween1);
	tween1.chain(tween2);
	
	tween.start();
}

//change hat1 type 
function hat1()
{ 
	game.componentHat.activeItem(game.itemHat1);
	fireworksHat();
}
//change hat2 type 
function hat2()
{ 
	game.componentHat.activeItem(game.itemHat2);
	fireworksHat();
}
//change hat3 type 
function hat3()
{ 
	game.componentHat.activeItem(game.itemHat3);
	fireworksHat();
}
//change hat4 type 
function hat4()
{ 
	game.componentHat.activeItem(game.itemHat4)
	fireworksHat();
}
 
//change hat5 type 
function hat5()
{ 
	game.componentHat.activeItem(game.itemHat5);
	fireworksHat();
}
//change hat6 type 
function hat6()
{ 
	game.componentHat.activeItem(game.itemHat6);
	fireworksHat();
}
//change hat7 type 
function hat7()
{
	game.componentHat.activeItem(game.itemHat7);
	fireworksHat();
}
//change hat8 type
function hat8()
{ 
	game.componentHat.activeItem(game.itemHat8);
	fireworksHat();
}
//change hat9 type 
function hat9()
{ 
	game.componentHat.activeItem(game.itemHat9);
	fireworksHat();
}
//change hat10 type 
function hat10()
{ 
	game.componentHat.activeItem(game.itemHat10);
	fireworksHat();
}
//change hat11 type 
function hat11()
{ 
	game.componentHat.activeItem(game.itemHat11);
	fireworksHat();
}
//change hat12 type 
function hat12()
{ 
	game.componentHat.activeItem(game.itemHat12);
	fireworksHat();
}
//change hat13 type 
function hat13()
{ 
	game.componentHat.activeItem(game.itemHat13);
	fireworksHat();
}

//-----End : change hat type 
function loadEvent(element)
{
	var n=element.split(",");
	
	for(j=0;j<n.length;j++)
	{
		for(i=0;i<document.getElementsByClassName(n[j]).length;i++)
		{
			document.getElementsByClassName(n[j])[i].addEventListener("click",function(){
				var cl = this.className.split(" ");
				for(i=0;i<document.getElementsByClassName(cl[0]).length;i++)
				{
					document.getElementsByClassName(cl[0])[i].style.opacity=1;
				}
				this.style.opacity=0.6;
			},false);
		}
	}
	
}
var ints=0;
var item = "item0";
function next()
{
	if(ints!=document.getElementsByClassName("page").length)
	{
		ints = ints+1;
	} else {
		ints = 0;
	}
	item = "item"+ints;
	slideTo(item);
}
function pre()
{
	if(ints!=0)
	{
		ints = ints-1;
	} else {
		ints=document.getElementsByClassName("page").length;
	}
	item = "item"+ints;
	slideTo(item);
}
</script>

<!-- js slide -->
<script type="text/javascript">

//demo1----------------------------slide/flip transition

var FOCUS_PAGE = getElement('item0');
var FLIPPED = false;
function hideURLbar() {
    setTimeout(scrollTo, 0, 0, 1);
}

{
  window.addEventListener('load', function(e) {
   //todo - check to see if one already exists for that page
    new Slider("page-container", "sliderFill", "item0", 100, 0,null);
  }, false);
}

function slideTo(target) {

    var target = getElement(target);
    //1.)the page we are bringing into focus dictates how
    // the current page will exit. So let's see what classes
    // our incoming page is using. We know it will have stage[right|left|etc...]
    var classes = target.className.split(' ');

    //2.)decide if the incoming page is assigned to right or left
    // (-1 if no match)
    var stageType = classes.indexOf('stage-left');

    //3.) on initial page load focusPage is null, so we need
    // to set the default page which we're currently seeing.
    if (FOCUS_PAGE == null) {
        //use home page
        FOCUS_PAGE = getElement('item0');
    }

    //3a.)Flip if needed
    var frontNodes = document.getElementById('front').getElementsByTagName('*');
    var i;
    for (i = 0; i < frontNodes.length; i += 1) {
        if(target.id == frontNodes[i].id && FLIPPED){
           flip();
        }
    }
    //4.) decide how this focused page should exit.
    if (stageType > 0) {
        FOCUS_PAGE.className = 'page transition stage-right';
    } else {
        FOCUS_PAGE.className = 'page transition stage-left';
    }

    //5. refresh/set the global variable
    FOCUS_PAGE = target;

    //6. Bring in the new page.
    FOCUS_PAGE.className = 'page transition stage-center';

    //todo - check to see if one already exists for that page
    new Slider("page-container", "sliderFill", FOCUS_PAGE.id, 100, 0,null);
}

function flip(id) {               9
    //get a handle on the flippable region
    var front = getElement('front');
    var back = getElement('back');

    //again, just a simple way to see what the state is
    var classes = front.className.split(' ');
    var flipped = classes.indexOf('flipped');

    if (flipped >= 0) {
        //already flipped, so return to original
        front.className = 'normal';
        back.className = 'flipped';
        FLIPPED = false;
    } else {
        //do the flip
        front.className = 'flipped';
        back.className = 'normal';
        FLIPPED = true;
    }
}

function Slider(track, backfill, page, maxRange, currentPos,callback)
{
    track = document.getElementById(track);
    backfill = document.getElementById(backfill);
    page = document.getElementById(page);
    currentPos = page.style.left;

    var thumbWidth = 20;
    var borderWidth = 10;

    var originalTouch = 0;
    var originalX = 0;

    var slideDirection = null;
    var cancel = false;
    var swipeThreshold = 201;

    var swipeTime;
    var timer;
    var maxPos;

    function pageMove(event) {
        //get position after transform
        var curTransform = new WebKitCSSMatrix(window.getComputedStyle(page).webkitTransform);
        var pagePosition = curTransform.m41;

        //make sure finger is not released
        if(event.type != 'touchend'){
            //holder for current x position
            var currentTouch = event.touches[0].clientX;

            if(event.type == 'touchstart'){
                //reset measurement to 0 each time a new touch begins
                originalTouch = event.touches[0].clientX;
                timer = timerStart();
            }

            //get the difference between where we are now vs. where we started on first touch
            currentPos = currentTouch - originalTouch;

            //figure out if we are cancelling the swipe event
            //simple gauge for finding the highest positive or negative number
            if(pagePosition < 0){
               if(maxPos < pagePosition) {
                    cancel = true;
                }else{
                    maxPos = pagePosition;
                }
            }else{
                if(maxPos > pagePosition) {
                    cancel = true;
                }else {
                    maxPos = pagePosition;
                }
            }

        }else{
            //touch event comes to an end
            swipeTime = timerEnd(timer,'numbers2');
            currentPos = 0;

            //how far do we go before a page flip occurs
            var pageFlipThreshold = 75;

            if(!cancel){
                //find out which direction we're going on x axis
                if(pagePosition >= 0){
                //moving current page to the right
                //so means we're flipping backwards
                   if((pagePosition > pageFlipThreshold) || (swipeTime < swipeThreshold)){
                       //user wants to go backward
                       slideDirection = 'right';
                    }else{
                       slideDirection = null;
                    }
                }else{
                //current page is sliding to the left
                    if((swipeTime < swipeThreshold) || (pagePosition < pageFlipThreshold)){
                       //user wants to go forward
                       slideDirection = 'left';
                    }else{
                       slideDirection = null;
                    }

                }
            }
            maxPos = 0;
            cancel = false;
        }

        positionPage();
    }

    function positionPage(end)
    {
        page.style.webkitTransform = 'translate3d('+ currentPos + 'px, 0, 0)';
        if(end){
            page.style.WebkitTransition = 'all .4s ease-out';
            //page.style.WebkitTransition = 'all .4s cubic-bezier(0,.58,.58,1)'
        }else{
            page.style.WebkitTransition = 'all .2s ease-out';
        }
        page.style.WebkitUserSelect = 'none';
    }

    track.ontouchstart = function(event) {
    //alert(event.touches[0].clientX);
        pageMove(event);
    }
    track.ontouchmove = function(event) {
        event.preventDefault();
        pageMove(event);
    }
    track.ontouchend = function(event) {
        pageMove(event);
        if(slideDirection == 'left'){
           slideTo('products-page');
        }else if (slideDirection == 'right'){
            slideTo('home-page');
        }
    }

    positionPage(true);
}

//    demo1----------------------------end slide/flip transition

function getElement(id) {
    return document.getElementById(id)
}

function timerStart() {
    return (new Date()).getTime();
}

function timerEnd(start, id) {
    return ((new Date()).getTime() - start);
}

function log(statement){
    var log = getElement('log');
    var currentText = log.innerHTML;
    log.innerHTML = (new Date()).toTimeString() + ': ' + statement + '<br/>' + currentText;
}


</script>
<!-- end js slide -->

</head>
<body onload="initGame(),loadEvent('skin,cheek,eyeliner,eyebrow,eyelash,eyecolor,lip,dress,hair,earring,lines,hat'),hideURLbar()">
<canvas id="gameCanvas" width="670"  height="525">

	</canvas>
	<div class="frame" id="page-container">
		<a href="javascript:void(0)" onclick="next()" class="next"><img src="img/next.png"/></a>
		<a href="javascript:void(0)" onclick="pre()" class="pre"><img src="img/pre.png"/></a>
		<div  id="front" class="normal">
			<div class='item page' id="item0">
				<!-- skin button -->
				<img src="img/skin/skin1.png" class='skin' onclick="skin1()"/>
				<img src="img/skin/skin2.png" class='skin skin_left1' onclick="skin2()"/>
				<img src="img/skin/skin3.png" class='skin skin_left2' onclick="skin3()"/>
				<img src="img/skin/skin4.png" class='skin skin_left3' onclick="skin4()"/>
				
				<!-- cheek button -->
				<img src="img/cheek/cheek1.png" class='cheek' onclick="cheek4()"/>
				<img src="img/cheek/cheek2.png" class='cheek cheek_left1' onclick="cheek3()"/>
				<img src="img/cheek/cheek3.png" class='cheek cheek_left2' onclick="cheek2()"/>
				<img src="img/cheek/cheek4.png" class='cheek cheek_left3' onclick="cheek1()"/>
				
				<!-- eyeliner button -->
				<img src="img/eyeliner/boder-eye1.png" class='eyeliner' onclick="eyeliner1()"/>
				<img src="img/eyeliner/boder-eye2.png" class='eyeliner eyeliner_left1' onclick="eyeliner2()"/>
				<img src="img/eyeliner/boder-eye3.png" class='eyeliner eyeliner_left2' onclick="eyeliner3()"/>
				<img src="img/eyeliner/boder-eye4.png" class='eyeliner eyeliner_left3' onclick="eyeliner4()"/>
				<img src="img/eyeliner/boder-eye5.png" class='eyeliner eyeliner_left4' onclick="eyeliner5()"/>
				<img src="img/eyeliner/boder-eye6.png" class='eyeliner eyeliner_left5' onclick="eyeliner6()"/>
				<img src="img/eyeliner/boder-eye7.png" class='eyeliner eyeliner_left6' onclick="eyeliner7()"/>
				
			</div>
			<div id="item1" class="page stage-left item">
				<!-- eyebrow button -->

				<img src="img/eyebrow/eyebrow_101x10_102x193.png" class='eyebrow' onclick="eyebrow1()"/>
				<img src="img/eyebrow/eyebrow_103x12_101x192.png" class='eyebrow eyebrow1' onclick="eyebrow2()"/>
				<img src="img/eyebrow/eyebrow_92x12_107x193.png" class='eyebrow eyebrow2' onclick="eyebrow3()"/>
				<img src="img/eyebrow/eyebrow_98x12_104x193.png" class='eyebrow eyebrow3' onclick="eyebrow4()"/>
				<img src="img/eyebrow/eyebrow_99x12_103x191.png" class='eyebrow eyebrow4' onclick="eyebrow5()"/>

				<!-- eyelash button-->
			
				<img src="img/eyelash/beyelash_103x23_102x197.png" class='eyelash' onclick="eyelash1()"/>
				<img src="img/eyelash/beyelash_112x18_97x119.png" class='eyelash eyelash1' onclick="eyelash2()"/>
				<img src="img/eyelash/beyelash_90x18_109x199.png" class='eyelash eyelash2' onclick="eyelash3()"/>
				<img src="img/eyelash/beyelash_92x18_107x200.png" class='eyelash eyelash3' onclick="eyelash4()"/>
				<img src="img/eyelash/beyelash_97x19_105x198.png" class='eyelash eyelash4' onclick="eyelash5()"/>
			
				
				<!-- eyecolor button -->
				<img src="img/eyecolor/eye1.png" class='eyecolor' onclick="eyecolor2()"/>
				<img src="img/eyecolor/eye2.png" class='eyecolor eyecolor1' onclick="eyecolor5()"/>
				<img src="img/eyecolor/eye3.png" class='eyecolor eyecolor2' onclick="eyecolor6()"/>
				<img src="img/eyecolor/eye4.png" class='eyecolor eyecolor3' onclick="eyecolor3()"/>
				<img src="img/eyecolor/eye5.png" class='eyecolor eyecolor4' onclick="eyecolor4()"/>
				<img src="img/eyecolor/eye6.png" class='eyecolor eyecolor5' onclick="eyecolor7()"/>
				<img src="img/eyecolor/eye7.png" class='eyecolor eyecolor6' onclick="eyecolor1()"/>
				<img src="img/eyecolor/eye8.png" class='eyecolor eyecolor7' onclick="eyecolor8()"/>
				

				<!-- lip button -->
				<img src="img/lip/lip1.png" class='lip' onclick="lip1()"/>
				<img src="img/lip/lip2.png" class='lip lip1' onclick="lip2()"/>
				<img src="img/lip/lip3.png" class='lip lip2' onclick="lip3()"/>
				<img src="img/lip/lip4.png" class='lip lip3' onclick="lip4()"/>
				<img src="img/lip/lip5.png" class='lip lip4' onclick="lip5()"/>
				<img src="img/lip/lip6.png" class='lip lip5' onclick="lip6()"/>
				
			</div>
			
			<div id="item2" class='item page stage-left'>
				<!--clothes button -->
				<img src="img/clothes/dress1.png" class='dress' onclick="clothes5()"/>
				<img src="img/clothes/dress2.png" class='dress dress1' onclick="clothes2()"/>
				<img src="img/clothes/dress3.png" class='dress dress2' onclick="clothes1()"/>
				<img src="img/clothes/dress4.png" class='dress dress3' onclick="clothes4()"/>
				<img src="img/clothes/dress5.png" class='dress dress4' onclick="clothes3()"/>
				
			</div>
			
			<div id="item3" class='item page stage-left'>
				<!-- hair button -->
				<img src="img/hair/hair1.png" class='hair' onclick="hair1()"/>
				<img src="img/hair/hair2.png" class='hair hair1' onclick="hair2()"/>
				<img src="img/hair/hair3.png" class='hair hair2' onclick="hair5()"/>
				<img src="img/hair/hair4.png" class='hair hair3' onclick="hair3()"/>
				<img src="img/hair/hair5.png" class='hair hair4' onclick="hair4()"/>
				
				<!-- necklace button -->
				<img src="img/necklace/lines1.png" class='lines' onclick="necklace4()"/>
				<img src="img/necklace/lines2.png" class='lines lines1' onclick="necklace3()"/>
				<img src="img/necklace/lines3.png" class='lines lines2' onclick="necklace1()"/>
				<img src="img/necklace/lines4.png" class='lines lines3' onclick="necklace2()"/>
				<img src="img/necklace/lines5.png" class='lines lines4' onclick="necklace5()"/>
				
				<!-- earring button -->
				<img src="img/earring/eardrop1.png" class='earring' onclick="earring5()"/>
				<img src="img/earring/eardrop2.png" class='earring earring1' onclick="earring2()"/>
				<img src="img/earring/eardrop3.png" class='earring earring2' onclick="earring3()"/>
				<img src="img/earring/eardrop4.png" class='earring earring3' onclick="earring4()"/>
				<img src="img/earring/eardrop5.png" class='earring earring4' onclick="earring1()"/>
			</div>
			
			<div id="item4" class='item page stage-left'>
				<!--hat button  -->
				<img src="img/hat/hat1.png" class='hat' onclick="hat5()"/>
				<img src="img/hat/hat2.png" class='hat hat1' onclick="hat2()"/>
				<img src="img/hat/hat3.png" class='hat hat2' onclick="hat4()"/>
				<img src="img/hat/hat4.png" class='hat hat3' onclick="hat13()"/>
				<img src="img/hat/hat5.png" class='hat hat4' onclick="hat9()"/>
				<img src="img/hat/hat6.png" class='hat hat5' onclick="hat7()"/>
				<img src="img/hat/hat7.png" class='hat hat6' onclick="hat12()"/>
				<img src="img/hat/hat8.png" class='hat hat7' onclick="hat3()"/>
				<img src="img/hat/hat9.png" class='hat hat8' onclick="hat10()"/>
				<img src="img/hat/hat10.png" class='hat hat9' onclick="hat6()"/>
				<img src="img/hat/hat11.png" class='hat hat10' onclick="hat11()"/>
				<img src="img/hat/hat12.png" class='hat hat11' onclick="hat8()"/>
				<img src="img/hat/hat13.png" class='hat hat12' onclick="hat1()"/>
				
			</div>
			<div class="clear"></div>
		</div>
	</div>
</body>
</html>